<html>
<head>
<title>Custom Animation</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(function() {
		$('#obama1').bind('click',function(e) {
			$(this).animate({opacity: 'toggle'}, 'slow');
		});
		$('#obama2').bind('click',function(e) {
			$(this).animate({
					width: $(this).width() * 2,
					height: $(this).height() * 2
				},
				2000
			);
		});
		$('#obama3').bind('click',function(e) {
			$(this).css('position','relative').animate({
					opacity: 0,
					top: $(window).height() - $(this).height() - $(this).position().top
				},
				'slow',
				function() {
					$(this).hide();
				}
			);
		});
		$('#obama4').bind('click',function(e) {
			var position = $(this).position();
			$(this)
			.css({position:'absolute',top:position.top, left:position.left})
			.animate({
				opacity: 'hide',
				width: $(this).width() * 5,
				height: $(this).height() * 5,
				top: position.top - ($(this).height() * 5 / 2),
				left: position.left - ($(this).width() * 5 / 2)
			},
			'normal');
		});					
	});
</script>
</head>
<body>
	<p>Click on the image!</p>
	<img id="obama1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"/>
	<img id="obama2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"/>
	<img id="obama3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"/>
	<img id="obama4" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/220px-Official_portrait_of_Barack_Obama.jpg"/>
	<div id="console"></div>
</body>
</html>
